{$helper->setJs('jquery.ui.timepicker1.3.js')}     
{$helper->setCss('jquery.ui.timepicker1.3.css')} 
     {literal}
<script type="text/javascript">         
    
    $(function() {
        $( "#datepicker" ).datepicker();
        $( "#datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
        $('.error').hide();
    });
        
    $(document).ready(function(){
        
        $.timepicker({
            'hour24': [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
        });//common format
        
            
        $("input[type='tijd']").timepicker({
            'minDivision'                 : 15,
            'hourFormat'              : 24,// 12 or 24
            'hourCols'                  : 8,// 6 or 8 columns
            'closeOnComplete'        : true
        });
        
         }); 
         
         

    $(function() { // onload...do
        $('#contactForm').submit(function() {
          
           $('.error').hide(); 
            var thuis = $("input#thuis").val();  
            if (thuis == "") {  
          $("label#thuis_error").show();  
          $("input#thuis").focus();  
          return false;  
        }  
            var uit = $("input#uit").val();  
            if (uit == "") {  
          $("label#uit_error").show();  
          $("input#uit").focus();  
          return false;  
        }     
            var datum = $("input#datepicker").val();  
            if (datum == "") {  
          $("label#datum_error").show();  
          $("input#datepicker").focus();  
          return false;  
        }  
            var tijd = $("input#picktime").val();  
            if (tijd == "") {  
          $("label#tijd_error").show();  
          $("input#picktime").focus();  
          return false;  
        }
            
            // now we're going to capture *all* the fields in the
          // form and submit it via ajax.
          
          // :input is a macro that grabs all input types, select boxes
          // textarea, etc.  Then I'm using the context of the form from 
          // the initial '#contactForm' to narrow down our selector
          var inputs = [];
          $(':input', this).each(function() {
            inputs.push(this.name + '=' + escape(this.value));
          })
          
          // now if I join our inputs using '&' we'll have a query string
          jQuery.ajax({
            data: inputs.join('&'),
            url: '../output.php?module=wedstrijdplannen&action=submitPlannen&admin',
            timeout: 2000,
            error: function() {
              console.log("Failed to submit");
            },
            success: function(r) { 
               window.location.href="wedstrijdplannen" ;
            }
          }) // checkout http://jquery.com/api for more syntax and options on this method.
          
          // re-test...
          // by default - we'll always return false so it doesn't redirect the user.
          return false;
        })
      })
</script>
{/literal}
 <form action="" method="POST" id="contactForm">
<table> 
    <tr>
        <td>Team Thuis:</td>
        <td> <select name="thuis" id="thuis">
               {foreach from=$groups item=group}
                 <optgroup label="{$group->getNaam()}"> 
                 {foreach from=$group->getTeams() item=team}  
                   <option label="{$team->getNaam()}" value="{$team->getTeamid()}">{$team->getNaam()}</option>  
                 {foreachelse}
                 
                 {/foreach}
                 </optgroup>
               {foreachelse}
                 <optgroup label="{$smarty.const.NO_POULE}">
               {/foreach}
               </select>
               <label id="thuis_error" class="error">Selecteer een team</label></td>
               
        <td>Team Uit:</td>
        <td> <select name="uit" id="uit">
               {foreach from=$groups item=group}
                 <optgroup label="{$group->getNaam()}"> 
                 {foreach from=$group->getTeams() item=team}  
                   <option label="{$team->getNaam()}" value="{$team->getTeamid()}">{$team->getNaam()}</option>  
                 {foreachelse}
                 
                 {/foreach}
                 </optgroup>
               {foreachelse}
                 <optgroup label="{$smarty.const.NO_POULE}">      
               {/foreach}
               </select> 
               <label id="uit_error" class="error">Selecteer een team</label></td>
    </tr>
    <tr>
        <td>{$smarty.const.DATE}:</td>
        <td><input type="text" id="datepicker" name="datum">
         <label id="datum_error" class="error">Selecteer een datum</label></td>
        <td>{$smarty.const.TIME}:</td>
        <td><input id="picktime" type="tijd" name="tijd" />
         <label id="tijd_error" class="error">Selecteer een tijd</label> </td>
    </tr>
    <tr>
        <td>Type:</td>
        <td><select name="type">
             <option value="0">Poule</option>
             <option value="1">8e Finale</option>
             <option value="2">Kwart Finale</option>
             <option value="3">Halfe Finale</option>
             <option value="4">Finale</option>
            </select></td>
    </tr>
   </table> 


<input type="submit" name="submit" value="Toevoegen!" ></form>        

